// Main Navigation
//
//

div#litstack .lit-navigation {
    grid-area: s;
    border-right: $border-width solid $gray-400;
    //padding-top: $nav-padding-top;
    background: $nav-bg;
    overflow-y: auto;
    height: calc(100vh - #{$topbar-height});

    & > div > .list-group {
        border-bottom: 1px solid $gray-400;
        padding-top: $nav-padding-top;
    }

    .list-group-item {
        border-bottom-width: 0;

        &.list-group-item-action {
            &:active {
                background-color: $list-group-bg;
            }

            &:hover {
                background-color: $nav-item-hover-bg;
            }
        }

        &.active {
            background-color: $gray-200;
            color: $nav-item-active-color;
            font-weight: $nav-item-active-font-weight;
            border-right: $nav-item-active-border-width solid
                $nav-item-active-color;
        }
    }

    .collapse,
    .collapsing {
        padding: 0;
        background-color: $list-group-collapsed-bg;

        .list-group-item {
            padding-left: $nav-item-collapsed-padding-left;
        }
    }

    @media (max-width: map-get($grid-breakpoints, $nav-breakpoint-mobile)) {
        width: $sidebar-width;
        position: fixed;
        height: calc(100vh - #{$nav-height-mobile * 2});
        top: $nav-height-mobile;
        transition: 0.2s all ease;
        left: -$sidebar-width;

        z-index: $zindex-fixed;
        //z-index: 1;

        &.visible {
            left: 0;
        }
    }
}
